<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../src/three.js"></script>
    <script src="../src/OrbitControls.js"></script>
    <style>
        html,body{
            width: 100%;height: 100%;
        }
        #container{
            width: 100%;height: 100%;
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>
<script>
    window.onload = function(){
        let container = document.getElementById("container")
        let scene,      scene2,
            camera,     camera2,
            renderer,   renderer2,
            geometry,   geometry2,
            mesh,       mesh2,
            controller, mixer,  controller2,
            material,   material2,
            plane,      target
        init()
        function init(){
            scene = new THREE.Scene()
            scene2 = new THREE.Scene()
            camera = new THREE.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 1000)
            camera.position.set(200,200,200)
            camera.lookAt(scene.position)

            renderer = new THREE.WebGLRenderer({antialias: true})
            renderer.setClearColor(0xEEEEEE)
            renderer.setSize(container.clientWidth, container.clientHeight/2)
            container.appendChild(renderer.domElement)

            renderer2 = new THREE.WebGLRenderer({antialias: true})
            renderer2.setClearColor(0xEEEEEE)
            renderer2.setSize(container.clientWidth, container.clientHeight/2)
            container.appendChild(renderer2.domElement)
            
            geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
            var material = new THREE.MeshLambertMaterial({
                color: 0xffff00
            }); //材质对象Material
            mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
            scene.add(mesh); //网格模型添加到场景中

           

            /**
             * 光源设置
             */
            //点光源
            var point = new THREE.PointLight(0xffffff, 0.9);
            point.position.set(400, 200, 300); //点光源位置
            scene.add(point); //点光源添加到场景中
            var point2 = new THREE.PointLight(0xffffff, 0.9);
            point2.position.set(-400, -200, -300); //点光源位置
            scene.add(point2); //点光源添加到场景中
            //环境光
            var ambient = new THREE.AmbientLight(0xffffff, 0.9);
            scene.add(ambient);

            var point = new THREE.PointLight(0xffffff, 0.9);
            point.position.set(400, 200, 300); //点光源位置
            scene2.add(point); //点光源添加到场景中
            var point2 = new THREE.PointLight(0xffffff, 0.9);
            point2.position.set(-400, -200, -300); //点光源位置
            scene2.add(point2); //点光源添加到场景中
            //环境光
            var ambient = new THREE.AmbientLight(0xffffff, 0.9);
            scene2.add(ambient);


             // 创建一个WebGL渲染目标对象WebGLRenderTarget
            // 设置渲染结果(一帧图像)的像素为500x500
            target = new THREE.WebGLRenderTarget(500, 500);
            console.log(target.texture)
            renderer.setRenderTarget(target)
            renderer.setClearColor(0xff0000, 1)
            renderer.render(scene,camera)
            console.log(target.texture)
            
            geometry2 = new THREE.BoxGeometry(100,100,100)
            material2 = new THREE.MeshLambertMaterial({
                map:target.texture
            })
            mesh2 = new THREE.Mesh(geometry2,material2)
            scene2.add(mesh2)
            
            camera2 = new THREE.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 1000)
            camera2.position.set(200,200,200)
            camera2.lookAt(scene2.position)

            controller = new THREE.OrbitControls(camera, renderer.domElement)
            controller2 = new THREE.OrbitControls(camera2, renderer2.domElement)
            
            animate()
            var current_renderer_target = renderer.getRenderTarget()
            // console.log(renderer)//.getRenderTarget()
            // console.log(renderer2)
            // console.log(target)
            // console.log(mesh2)
            // console.log(renderer.setRenderTarget(target))

            // renderer.setRenderTarget(target)
            // renderer.setClearColor(0xff0000, 1)
            // renderer.render(scene,camera)
        }
        function animate(){
            // renderer.setClearColor(0xff0000, 1)
            // renderer.render(scene,camera)
            // renderer.setRenderTarget(target)
            // renderer.setClearColor(0xff0000, 1)
            // renderer.render(scene,camera)
            // 设置当前渲染场景的背景
            // mesh2.material
            renderer2.render(scene2,camera2)
            controller.update()
            controller2.update()
            requestAnimationFrame(animate)
        }
    }
</script>
</html>